<script lang="ts" context="module">
  import type { OptionValue, Option, RadioContext} from "./conf";
</script>
<script lang="ts">
  import { createEventDispatcher, setContext } from 'svelte';
  const dispatch = createEventDispatcher();
  import { writable } from 'svelte/store';
  export let name: string = "rl";
  export let value: OptionValue;

  const activeRadioValue$ = writable(value);
  let radios = []
  setContext<RadioContext>('radio-list', { name, activeRadioValue$, addRadio })

  function addRadio(opt: Option): number {
      const index = radios.length;
      radios = [...radios, { opt }];
      return index;
  }

  activeRadioValue$.subscribe(v => {
    value = v;
    dispatch("changed", {
      value
    });
  });

  $: {
    activeRadioValue$.set(value)
  }


</script>
<div class="rl-container">
  <slot></slot>
</div>
<style lang="postcss">
  .rl-container {
    @apply w-full mx-auto px-2 py-1;
  }
</style>